<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQUery Quick Action Example</title>
		<link rel="stylesheet" href="css/sample.css" type="text/css" />
		<link rel="stylesheet" href="css/jquery-ui-1.8.17.custom.css" type="text/css" />
		<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery-quick-action.js"></script>
		<script type="text/javascript" src="js/sample.js"></script>
	</head>
	<body>
		<h1>jQuery Quick Action Example</h1>
		
		<h2>Horizontal Style(Quick Action)</h2>
		<table id="quick-action-table" class="member-table">
			<thead>
				<tr><th>ID</th><th>name</th><th>mail</th><th>ops</th></tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Andy</td>
					<td>andy@example.com</td>
					<td><button class="quick-action-button" id="qabutton-1">action</button></td>
				</tr>
				<tr>
					<td>2</td>
					<td>Beth</td>
					<td>beth@example.com</td>
					<td><button class="quick-action-button" id="qabutton-2">action</button></td>
				</tr>
				<tr>
					<td>3</td>
					<td>Carl</td>
					<td>carl@example.com</td>
					<td><button class="quick-action-button" id="qabutton-3">action</button></td>
				</tr>
				<tr>
					<td>4</td>
					<td>Debra</td>
					<td>debra@example.com</td>
					<td><button class="quick-action-button" id="qabutton-4">action</button></td>
				</tr>
				<tr>
					<td>5</td>
					<td>Elic</td>
					<td>elic@example.com</td>
					<td><button class="quick-action-button" id="qabutton-5">action</button></td>
				</tr>
				<tr>
					<td>6</td>
					<td>Fran</td>
					<td>fran@example.com</td>
					<td><button class="quick-action-button" id="qabutton-6">action</button></td>
				</tr>
				
			</tbody>
		</table>
		<h2>Vertical Style(similar to Context menu)</h2>
		<table id="context-menu-table" class="member-table">
			<thead>
				<tr><th>ID</th><th>name</th><th>mail</th><th>ops</th></tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Andy</td>
					<td>andy@example.com</td>
					<td><button class="quick-action-button" id="cmbutton-1">action</button></td>
				</tr>
				<tr>
					<td>2</td>
					<td>Beth</td>
					<td>beth@example.com</td>
					<td><button class="quick-action-button" id="cmbutton-2">action</button></td>
				</tr>
				<tr>
					<td>3</td>
					<td>Carl</td>
					<td>carl@example.com</td>
					<td><button class="quick-action-button" id="cmbutton-3">action</button></td>
				</tr>
				<tr>
					<td>4</td>
					<td>Debra</td>
					<td>debra@example.com</td>
					<td><button class="quick-action-button" id="cmbutton-4">action</button></td>
				</tr>
				<tr>
					<td>5</td>
					<td>Elic</td>
					<td>elic@example.com</td>
					<td><button class="quick-action-button" id="cmbutton-5">action</button></td>
				</tr>
				<tr>
					<td>6</td>
					<td>Fran</td>
					<td>fran@example.com</td>
					<td><button class="quick-action-button" id="cmbutton-6">action</button></td>
				</tr>
				
			</tbody>
		</table>

		<span class="quick-action-area" id="quick-action-area">
			<button class="quick-action-item" id="quick-action-item-1">1</button>
			<button class="quick-action-item" id="quick-action-item-2">2</button>
			<button class="quick-action-item" id="quick-action-item-3">3</button>
			<button class="quick-action-item" id="quick-action-item-4">4</button>
			<button class="quick-action-item" id="quick-action-item-5">5</button>
		</span>
		
		<ul class="quick-action-area" id="context-menu-area" style="width: 120px">
			<li><a class="context-menu-item" href="#" id="context-menu-item-1">Item 1</a></li>
			<li><a class="context-menu-item" href="#" id="context-menu-item-2">Item 2</a></li>
			<li><a class="context-menu-item" href="#" id="context-menu-item-3">Item 3</a></li>
			<li><a class="context-menu-item" href="#" id="context-menu-item-4">Item 4</a></li>
			<li><a class="context-menu-item" href="#" id="context-menu-item-5">Item 5</a></li>
		</ul>
	</body>
</html>
